<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  <title>保修进度</title>
  <link href="css/font-awesome.min.css" rel="stylesheet">
  <link rel="stylesheet" href="css/weui.css">
<link rel="stylesheet" href="//cdn.bootcss.com/jquery-weui/0.8.3/css/jquery-weui.min.css">
  <link rel="stylesheet" href="css/common.css">
</head>
<style>
body {
  background: #ccc;
}
.order-icon{
  background: #fff;
}

.weui-flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

.weui-flex>.weui-flex__item {
  flex: 1;
  justify-content: center;
  align-items: center;
  display: flex;
  flex-direction: column;
}

.order-list {
   display: flex;
   padding: 10px 0;
   /*border-bottom:10px solid #ccc;*/
   border-top: 15px solid #ccc;
   flex-direction: column;
   margin-bottom: 10px;
 }

.order-state {
  /*flex:1;*/
  padding: 5px 10px;
  border-bottom: 1px solid #ccc;
}

.order-state>span:nth-child(2) {
  float: right;
  color: red;
}

.order-wrapper {
  display: flex;
}

.order-img {
  flex: 1;
}

.order-content {
  flex: 4;
  padding-left:15px;
}

.order-num {
  background: red;
  width: 15px;
  height: 15px;
  display: inline-block;
  border-radius: 50%;
  text-align: center;
  font-size: 12px;
  transform: translateY(-50%);
}

.order-icon {
  padding: 20px 0 10px 0;
}
ul ,li{
  list-style: none;
}
.user-phone{
  float: right;
  margin-right: 20px;
  font-size:16px;
}

.active{
  color:#0066CC;
}

.img-list li{
  width:60px;
  height:60px;
  margin-right:10px;
  display: inline-block;
}
</style>

<body>
  <div class="firstPage">
    <div class="weui-flex order-icon">
      <div class="weui-flex__item" data-state='1'>
        <div><i class='fa  icon-ambulance fa-fw icon-large'></i></div>
        <p>待派件</p>
      </div>
      <div class="weui-flex__item" data-state='2'>
        <div><i class='fa  icon-ambulance fa-fw icon-large'></i></div>
        <p>预约成功</p>
      </div>
      <div class="weui-flex__item" data-state='3'>
        <div><i class='fa  icon-ambulance fa-fw icon-large'></i><span class='order-num'>1</span></div>
        <p>维修中</p>
      </div>
      <div class="weui-flex__item" data-state='4'>
        <div><i class='fa  icon-ambulance fa-fw icon-large'></i></div>
        <p>待评价</p>
      </div>
    </div>
    <div class="weui-panel weui-panel_access">
      <!-- <div class="weui-panel__hd">详细信息</div> -->
      <div class="weui-panel__bd " id='myOrder'>
      </div>
    </div>
  </div>
  </div>
  <div class="secondPage">
  </div>
</body>

<script src="//cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="//cdn.bootcss.com/jquery-weui/0.8.3/js/jquery-weui.min.js"></script>
<script src='js/myorder.js'></script>

</html>
